<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import type { RouteLocationMatched } from 'vue-router'
import { useI18n } from 'vue-i18n'

defineOptions({
  name: 'Breadcrumb'
})

const { t } = useI18n()
const route = useRoute()
const router = useRouter()

// 面包屑列表
const breadcrumbList = ref<RouteLocationMatched[]>([])

// 监听路由变化，更新面包屑
watch(
  () => route.path,
  () => {
    // 过滤掉没有meta或meta.title的路由
    breadcrumbList.value = route.matched.filter(
      (item) => item.meta && item.meta.title
    )
  },
  { immediate: true }
)

// 处理点击事件
const handleClick = (path: string) => {
  router.push(path)
}
</script>

<template>
  <a-breadcrumb class="breadcrumb-container">
    <a-breadcrumb-item>
      <router-link to="/">
        <HomeOutlined />
        <span>{{ t('layout.breadcrumbHome') }}</span>
      </router-link>
    </a-breadcrumb-item>
    
    <a-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="item.path">
      <span 
        v-if="index === breadcrumbList.length - 1" 
        class="no-link"
      >
        {{ t(item.meta.title as string) }}
      </span>
      <a v-else @click.prevent="handleClick(item.path)">
        {{ t(item.meta.title as string) }}
      </a>
    </a-breadcrumb-item>
  </a-breadcrumb>
</template>

<style lang="scss" scoped>
.breadcrumb-container {
  padding: $spacing-md 0;
  
  :deep(.ant-breadcrumb-link) {
    a {
      color: $text-color-secondary;
      
      &:hover {
        color: $primary-color;
      }
    }
    
    .no-link {
      color: $text-color-primary;
    }
  }
}
</style> 